<template>
  <div class="ssc-search">
    <a-row :gutter="24">
      <a-col :span="4">
        <a-form-item label="类型">
          <a-select v-model:value="searchForm.tagType" placeholder="请选择类型">
            <a-select-option v-for="item in TAG_TYPE_OPTIONS" :key="item.value" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item label="更新日期">
          <a-range-picker v-model:value="searchForm.updatedTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item v-bind="validateInfos.keyword">
          <a-input v-model:value="searchForm.keyword" placeholder="请输入关键词搜索" />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-row justify="end">
          <a-button @click="clear()">重置</a-button>
          <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { Form } from 'ant-design-vue'
  import { onMounted, reactive, toRaw } from 'vue'

  import { TAG_TYPE_OPTIONS } from '../constants'

  const emit = defineEmits<(e: 'search', params: TagManageTypes.SearchData) => void>()
  const searchForm = reactive<TagManageTypes.SearchData>({
    tagType: undefined,
    keyword: '',
    updatedTimeStart: '',
    updatedTimeEnd: '',
    updatedTime: [],
  })

  const { validate, validateInfos, resetFields } = Form.useForm(searchForm, {})

  // 查询
  const clear = () => {
    resetFields()
  }

  // 获取格式化时间
  const getFormatTime = () => {
    const [start, end] = searchForm.updatedTime || []
    if (start && end) {
      searchForm.updatedTimeStart = start
      searchForm.updatedTimeEnd = end
      return
    }
    searchForm.updatedTimeStart = ''
    searchForm.updatedTimeEnd = ''
  }

  // 查询
  const search = () => {
    validate().then(() => {
      getFormatTime()
      emit('search', {
        ...toRaw(searchForm),
      })
    })
  }

  onMounted(() => {
    search()
  })
</script>
<style lang="less" scoped></style>
